<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>小型建表工具</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <script src="js/include.js" type="text/javascript" charset="utf-8"></script>
    <link rel="stylesheet" href="/lib/layui/css/admin.css">

    <style>
        .leftMenu{
            height: 100%;
        }
        .layui-body {
            left: 200px;top: 50px
        }
        @media screen and (max-width: 999px) {
            .layui-body {
                left: 0px;top: 50px
            }
        }
    </style>

</head>
<body class="body">
<div id="LAY_app layadmin-side-shrink" style="overflow-x: hidden">
    <div class="layui-layout layui-layout-admin" >
        <!-- 头部区域 -->
        <div class="layui-header">
            <ul class="layui-nav layui-layout-left">
                <li class="layui-nav-item layadmin-flexible" lay-unselect="">
                    <a href="javascript:;" layadmin-event="flexible" title="侧边伸缩">
                        <label  class="layui-icon mybutton " ></label>
                    </a>
                </li>


            </ul>
            <ul class="layui-nav layui-layout-right" lay-filter="layadmin-layout-right">

                <li class="layui-nav-item" lay-unselect="">
                    <dd><a href="javascript:void(0)" onclick="signOut()">退出</a></dd>
                    <a href="javascript:;">
                        <cite class="cite">鲍恩撑,欢迎你</cite>
                        <span class="layui-nav-more"></span>
                    </a>
                    <dl class="layui-nav-child">
                        <dd><a lay-href="set/user/info.html">基本资料</a></dd>
                        <dd><a lay-href="set/user/password.html">修改密码</a></dd>
                        <hr>
                        <dd layadmin-event="logout" style="text-align: center;"><a>退出</a></dd>
                    </dl>
                </li>

                <li class="layui-nav-item layui-hide-xs" lay-unselect="">
                    <a href="javascript:;" layadmin-event="about"><i class="layui-icon layui-icon-more-vertical"></i></a>
                </li>
                <li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-unselect="">
                    <a href="javascript:;" layadmin-event="more"><i class="layui-icon layui-icon-more-vertical"></i></a>
                </li>
                <span class="layui-nav-bar" style="left: 168px; top: 48px; width: 0px; opacity: 0;"></span></ul>
        </div>
        <!-- 左侧菜单区域 -->
        <div class="layui-side-scroll" id="view" style="position: absolute;top: 0;z-index: 1001;height: 1000px">
        </div>
        <!-- 主体区域 -->
        <div class="layui-body">
            <iframe src="html/welcome.html" id="J_xxxx" class="iframe layui-col-xs12 " style="height: 100%;border: none;" name="rightWindow">
            </iframe>
        </div>
        <!-- 辅助元素，一般用于移动设备下遮罩 -->
        <div class="layadmin-body-shade" layadmin-event="shade"></div>

    </div>
<!--菜单 模板引擎js代码-->
<script id="demo" type="text/html">
    <ul class="layui-nav layui-nav-tree leftTree leftMenu" lay-shrink="all">
        {{# layui.each(d, function(index, item){ }}
        <li class="layui-nav-item leftTree" >
            {{# if(item.children.length === 0){ }}
            <dd><a style="" href="{{ item.url }}" target="rightWindow">{{ item.name }}</a></dd>
            {{# } }}
            {{# if(item.children.length !== 0){ }}
            <a style="">{{ item.name }}</a>
            <dl class="layui-nav-child leftTree">
                {{# layui.each(item.children, function(index2, item2){ }}
                <dd><a href="{{ item2.url }}" target="rightWindow">{{ item2.name }} </a></dd>
                {{# }); }}
            </dl>
            {{# } }}
        </li>
        {{# }); }}

        {{# if(d.length === 0){ }}
        无数据
        {{# } }}
    </ul>
</script>
<!--页面操作 逻辑代码-->
<script type="text/javascript" charset="utf-8">
    //点击菜单按钮时触发的效果(大屏)
    $('.mybutton').click(function () {
        if($(window).width()>=900){
            //大屏的时候
            console.log("大屏")
            if($(this).hasClass('layui-icon-shrink-right')){
                $(".layui-side-scroll").css("transform"," translateX(-200px)")
                $(".layui-body").css("transform"," translateX(-200px)");
                $(".layui-body").css("width","100%");
                $(".layui-header").css("width","100%")
                $(".layui-layout-left").css("margin-left","-200px")
                $(this).toggleClass('layui-icon-shrink-right').toggleClass("layui-icon-spread-left");
            }else {
                $(".layui-side-scroll").css("transform"," translateX(0px)")
                $(".layui-body").css("transform"," translateX(0px)");
                $(".layui-body").css("width","auto");
                $(".layui-header").css("width","100%")
                $(".layui-layout-left").css("margin-left","0px")

                $(this).toggleClass('layui-icon-spread-left').toggleClass("layui-icon-shrink-right");
            }
        }else {
            //小屏的时候
            console.log("小屏")
            if($(this).hasClass('layui-icon-spread-left')){
                console.log("左向右")
                $(".layui-side-scroll").css("transform"," translateX(0px)")
                $(".layui-body").css("width","auto");
                $(".layui-layout-left").css("left","200px")
                $(".layui-body").css("left","200px");
                $(this).toggleClass('layui-icon-spread-left').toggleClass("layui-icon-shrink-right");
                $("body").css("ov","auto");
            }else {
                console.log("右向左")
                $(".layui-side-scroll").css("transform"," translateX(-200px)")

                $(".layui-body").css("width","auto");
                $(".layui-body").css("left","0px");
                $(".layui-layout-left").css("left","0px")
                $(this).toggleClass('layui-icon-spread-left').toggleClass("layui-icon-shrink-right");
            }

        }

    })

    //控制大小屏 菜单按钮样式
    $(window).resize(function () {          //当浏览器大小变化时
        if($(window).width()<900){
            console.log("小屏")
            $(".layui-side-scroll").css("transform"," translateX(-200px)")
            $(".layui-header").css("transform"," translateX(0px)");
            $(".layui-body").css("transform"," translateX(0px)");
            $(".layui-body").css("width","auto");
            //小屏的时候 默认 left 图标
            $('.mybutton').addClass('layui-icon-spread-left').removeClass("layui-icon-shrink-right")
        }else {
            $(".layui-side-scroll").css("transform"," translateX(0px)")
            $(".layui-header").css("transform"," translateX(0px)");
            $(".layui-body").css("transform"," translateX(0px)");
            $(".layui-body").css("width","auto");
            $('.mybutton').addClass("layui-icon-shrink-right").removeClass('layui-icon-spread-left')
        }

    });
    //加载菜单
    layui.use('laytpl', function () {
        var laytpl = layui.laytpl;
        var data;

        $.ajax({
            url:"/cms/user/getMenu",
            async:false,
            type: "post",
            success:function (e) {
                data=e.data;
            }
        })


        var getTpl = demo.innerHTML, view = document.getElementById('view');
        laytpl(getTpl).render(data, function (html) {
            view.innerHTML = html;
            //加载element模块
            layui.use('element', function () {
                var element = layui.element;
            });
        });


    })


//    /*点击遮罩 隐藏菜单*/
    $(".shade-box").click(function () {
        $('.btn').click();
    })
    //退出登录
    function signOut() {
        $.ajax({
            url: "/cms/user/signOut",
            success: function () {
                window.location.href = "/login.html";
            }
        })
    }

    //等dom加载完成后  执行操作
    $(document).ready(function () {
        //添加当前登录人员姓名
        var players = $.cookie("META-COOKIE");
        players=JSON.parse(players);
        if(players != null && players != "") {
            $('.cite').text(players.username+",欢迎你")
            if(players.role=="developer"){
                $("#J_xxxx").attr("src","html/welcome_developer.html");
            }


        }


        $(".layui-side-scroll").on("click", "dd", function () {
            if (window.innerWidth <= 999) {
                $('.mybutton').click();
            }
        });

        //初始化判断当前屏幕大小
        console.log("当前屏幕",$(window).width())
        if($(window).width()<900){
            console.log("小屏")
            $(".layui-side-scroll").css("transform"," translateX(-200px)")
                //小屏的时候 默认 left 图标
            $('.mybutton').addClass('layui-icon-spread-left').removeClass("layui-icon-shrink-right")
        }else {
            $('.mybutton').addClass("layui-icon-shrink-right").removeClass('layui-icon-spread-left')
        }
    });
</script>
</body>
</html>
